<template>
  <div class="bg-white rounded-lg shadow-lg">
    <div class="p-6">
      <!-- 标题和概述 -->
      <div class="mb-8">
        <h2 class="text-3xl font-bold text-gray-800 mb-4 flex items-center">
          <span class="text-4xl mr-3">🎨</span>
          Vue事件处理综合实战：交互式绘图板
        </h2>
        <div class="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg border-l-4 border-blue-500">
          <p class="text-lg text-gray-700 leading-relaxed">
            通过开发一个功能完整的交互式绘图板，综合运用Vue事件处理的各种技术手段，
            包括鼠标事件、键盘事件、事件修饰符、参数传递等核心概念。
          </p>
          <div class="mt-4 flex items-center space-x-6 text-sm text-gray-600">
            <span class="flex items-center"><span class="text-green-500 mr-1">⏱️</span> 预计时长：90分钟</span>
            <span class="flex items-center"><span class="text-blue-500 mr-1">🎯</span> 难度：中等</span>
            <span class="flex items-center"><span class="text-purple-500 mr-1">👥</span> 建议：分组协作</span>
          </div>
        </div>
      </div>

      <!-- 学习目标 -->
      <div class="mb-8">
        <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="text-2xl mr-2">🎯</span>
          实践目标
        </h3>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
            <h4 class="font-semibold text-blue-800 mb-2">技术目标</h4>
            <ul class="space-y-2 text-sm text-blue-700">
              <li class="flex items-start"><span class="mr-2">✓</span>掌握鼠标事件处理（mousedown、mousemove、mouseup）</li>
              <li class="flex items-start"><span class="mr-2">✓</span>理解键盘事件和快捷键组合</li>
              <li class="flex items-start"><span class="mr-2">✓</span>运用事件修饰符（.prevent、.stop等）</li>
              <li class="flex items-start"><span class="mr-2">✓</span>实现事件参数传递和返回值控制</li>
            </ul>
          </div>
          <div class="bg-green-50 p-4 rounded-lg border border-green-200">
            <h4 class="font-semibold text-green-800 mb-2">能力目标</h4>
            <ul class="space-y-2 text-sm text-green-700">
              <li class="flex items-start"><span class="mr-2">✓</span>培养复杂交互逻辑的设计思维</li>
              <li class="flex items-start"><span class="mr-2">✓</span>提升代码组织和性能优化能力</li>
              <li class="flex items-start"><span class="mr-2">✓</span>增强用户体验设计意识</li>
              <li class="flex items-start"><span class="mr-2">✓</span>锻炼问题分析和解决能力</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 项目功能介绍 -->
      <div class="mb-8">
        <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="text-2xl mr-2">⚡</span>
          项目功能
        </h3>
        <div class="grid md:grid-cols-3 gap-6">
          <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="text-3xl mb-3">🖌️</div>
            <h4 class="font-semibold text-gray-800 mb-2">绘制工具</h4>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 画笔工具</li>
              <li>• 橡皮擦</li>
              <li>• 直线绘制</li>
              <li>• 矩形绘制</li>
              <li>• 圆形绘制</li>
            </ul>
          </div>
          <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="text-3xl mb-3">🎨</div>
            <h4 class="font-semibold text-gray-800 mb-2">样式控制</h4>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 颜色选择器</li>
              <li>• 画笔大小调节</li>
              <li>• 透明度控制</li>
              <li>• 预设颜色板</li>
              <li>• 实时预览</li>
            </ul>
          </div>
          <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
            <div class="text-3xl mb-3">⌨️</div>
            <h4 class="font-semibold text-gray-800 mb-2">快捷操作</h4>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 撤销/重做 (Ctrl+Z/Y)</li>
              <li>• 保存图片 (Ctrl+S)</li>
              <li>• 清空画布</li>
              <li>• 工具快捷键</li>
              <li>• 右键菜单</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 实践指南 -->
      <div class="mb-8">
        <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="text-2xl mr-2">📋</span>
          实践指南
        </h3>
        <div class="space-y-6">
          <!-- 阶段1 -->
          <div class="border border-gray-200 rounded-lg p-6">
            <div class="flex items-center mb-4">
              <span class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold mr-3">1</span>
              <h4 class="text-lg font-semibold text-gray-800">项目分析与准备 (15分钟)</h4>
            </div>
            <div class="ml-11 space-y-3">
              <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <h5 class="font-medium text-blue-800 mb-2">📋 实践任务清单</h5>
                <div class="grid grid-cols-1 gap-2 text-sm text-blue-700">
                  <div class="flex items-center"><span class="mr-2">1️⃣</span>完成工具选择功能 (v-for + @click + :class)</div>
                  <div class="flex items-center"><span class="mr-2">2️⃣</span>完成颜色选择功能 (v-for + @click + :style)</div>
                  <div class="flex items-center"><span class="mr-2">3️⃣</span>完成画笔设置功能 (v-model + 计算属性)</div>
                  <div class="flex items-center"><span class="mr-2">4️⃣</span>完成鼠标事件处理 (@mousedown/@mousemove/@mouseup + .prevent)</div>
                  <div class="flex items-center"><span class="mr-2">5️⃣</span>完成键盘快捷键 (@keydown + 修饰符)</div>
                  <div class="flex items-center"><span class="mr-2">6️⃣</span>完成撤销/重做功能 (历史记录管理)</div>
                  <div class="flex items-center"><span class="mr-2">7️⃣</span>完成画布绘制逻辑 (Canvas API + Vue响应式)</div>
                </div>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg">
                <h5 class="font-medium text-gray-800 mb-2">📖 分析需求</h5>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• 仔细阅读项目案例文件：<code class="bg-gray-200 px-2 py-1 rounded text-xs">/chap05/tasks/5.0-template.html</code></li>
                  <li>• 理解绘图板的核心功能和交互逻辑</li>
                  <li>• 分析涉及的Vue事件处理技术点</li>
                  <li>• 查看模板中的TODO标记，了解需要完成的具体任务</li>
                </ul>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg">
                <h5 class="font-medium text-gray-800 mb-2">🔧 环境准备</h5>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• 点击"开始实践"按钮，在编辑器中打开模板文件</li>
                  <li>• 熟悉Vue 3组合式API的基本语法</li>
                  <li>• 了解Canvas API的基础绘制方法</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 阶段2 -->
          <div class="border border-gray-200 rounded-lg p-6">
            <div class="flex items-center mb-4">
              <span class="bg-green-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold mr-3">2</span>
              <h4 class="text-lg font-semibold text-gray-800">工具选择与颜色功能 (20分钟)</h4>
            </div>
            <div class="ml-11 space-y-3">
              <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
                <h5 class="font-medium text-yellow-800 mb-2">🎯 任务1: 工具选择功能</h5>
                <ul class="text-sm text-yellow-700 space-y-1">
                  <li>• 使用 <code class="bg-yellow-200 px-1 rounded text-xs">v-for</code> 渲染工具按钮</li>
                  <li>• 添加 <code class="bg-yellow-200 px-1 rounded text-xs">@click</code> 事件处理工具切换</li>
                  <li>• 使用 <code class="bg-yellow-200 px-1 rounded text-xs">:class</code> 动态显示选中状态</li>
                </ul>
              </div>
              <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <h5 class="font-medium text-blue-800 mb-2">🎯 任务2: 颜色选择功能</h5>
                <ul class="text-sm text-blue-700 space-y-1">
                  <li>• 使用 <code class="bg-blue-200 px-1 rounded text-xs">v-for</code> 渲染颜色调色板</li>
                  <li>• 添加 <code class="bg-blue-200 px-1 rounded text-xs">@click</code> 事件处理颜色切换</li>
                  <li>• 使用 <code class="bg-blue-200 px-1 rounded text-xs">:style</code> 动态设置背景色</li>
                </ul>
              </div>
              
              <!-- 任务1和任务2详细指南 -->
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.0-12.md'"
                  title="任务1和任务2详细实现指南"
                />
              </div>
            </div>
          </div>

          <!-- 阶段3 -->
          <div class="border border-gray-200 rounded-lg p-6">
            <div class="flex items-center mb-4">
              <span class="bg-purple-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold mr-3">3</span>
              <h4 class="text-lg font-semibold text-gray-800">画笔设置与鼠标事件 (25分钟)</h4>
            </div>
            <div class="ml-11 space-y-3">
              <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
                <h5 class="font-medium text-purple-800 mb-2">🎯 任务3: 画笔设置功能</h5>
                <ul class="text-sm text-purple-700 space-y-1">
                  <li>• 使用 <code class="bg-purple-200 px-1 rounded text-xs">v-model</code> 双向绑定画笔大小和透明度</li>
                  <li>• 使用计算属性动态显示当前设置值</li>
                  <li>• 实现颜色选择器的双向绑定</li>
                </ul>
              </div>
              <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                <h5 class="font-medium text-green-800 mb-2">🎯 任务4: 鼠标事件处理</h5>
                <ul class="text-sm text-green-700 space-y-1">
                  <li>• 添加 <code class="bg-green-200 px-1 rounded text-xs">@mousedown.prevent</code> 开始绘制</li>
                  <li>• 添加 <code class="bg-green-200 px-1 rounded text-xs">@mousemove.prevent</code> 跟踪鼠标移动</li>
                  <li>• 添加 <code class="bg-green-200 px-1 rounded text-xs">@mouseup.prevent</code> 结束绘制</li>
                </ul>
              </div>
              
              <!-- 任务3和任务4详细指南 -->
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.0-34.md'"
                  title="任务3和任务4详细实现指南"
                />
              </div>
            </div>
          </div>

          <!-- 阶段4 -->
          <div class="border border-gray-200 rounded-lg p-6">
            <div class="flex items-center mb-4">
              <span class="bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold mr-3">4</span>
              <h4 class="text-lg font-semibold text-gray-800">键盘快捷键与高级功能 (25分钟)</h4>
            </div>
            <div class="ml-11 space-y-3">
              <div class="bg-red-50 p-4 rounded-lg border border-red-200">
                <h5 class="font-medium text-red-800 mb-2">🎯 任务5: 键盘快捷键</h5>
                <ul class="text-sm text-red-700 space-y-1">
                  <li>• 添加 <code class="bg-red-200 px-1 rounded text-xs">@keydown</code> 事件监听器</li>
                  <li>• 实现工具快捷键 (B-画笔, E-橡皮, L-直线, R-矩形, C-圆形)</li>
                  <li>• 实现组合键 (Ctrl+Z撤销, Ctrl+Y重做, Ctrl+S保存)</li>
                </ul>
              </div>
              <div class="bg-orange-50 p-4 rounded-lg border border-orange-200">
                <h5 class="font-medium text-orange-800 mb-2">🎯 任务6: 撤销重做功能</h5>
                <ul class="text-sm text-orange-700 space-y-1">
                  <li>• 实现历史记录管理系统</li>
                  <li>• 添加按钮状态控制 (<code class="bg-orange-200 px-1 rounded text-xs">:disabled</code>)</li>
                  <li>• 完成撤销/重做逻辑实现</li>
                </ul>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg">
                <h5 class="font-medium text-gray-800 mb-2">🎯 任务7: Canvas绘制逻辑</h5>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• 完成Canvas API与Vue响应式数据结合</li>
                  <li>• 实现不同工具的绘制算法</li>
                  <li>• 添加动态状态信息显示</li>
                </ul>
              </div>
              
              <!-- 任务5、6、7详细指南 -->
              <div class="mt-4">
                <MarkdownViewer 
                  :file-path="'/chap05/tasks/5.0-567.md'"
                  title="任务5、6、7详细实现指南"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 技术要点提示 -->
      <div class="mb-8">
        <h3 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="text-2xl mr-2">💡</span>
          关键技术要点
        </h3>
        <div class="grid md:grid-cols-2 gap-6">
          <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg border border-blue-200">
            <h4 class="font-semibold text-blue-800 mb-3 flex items-center">
              <span class="mr-2">🖱️</span>鼠标事件处理
            </h4>
            <div class="space-y-2 text-sm text-blue-700">
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@mousedown.prevent="startDrawing"</code>
                <p class="mt-1 text-xs">阻止默认行为，开始绘制</p>
              </div>
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@mousemove.prevent="draw"</code>
                <p class="mt-1 text-xs">跟踪鼠标移动，实时绘制</p>
              </div>
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@mouseup.prevent="stopDrawing"</code>
                <p class="mt-1 text-xs">结束绘制，保存状态</p>
              </div>
            </div>
          </div>
          <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg border border-green-200">
            <h4 class="font-semibold text-green-800 mb-3 flex items-center">
              <span class="mr-2">⌨️</span>键盘事件处理
            </h4>
            <div class="space-y-2 text-sm text-green-700">
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@keydown.ctrl.z="undo"</code>
                <p class="mt-1 text-xs">Ctrl+Z 撤销操作</p>
              </div>
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@keydown.ctrl.y="redo"</code>
                <p class="mt-1 text-xs">Ctrl+Y 重做操作</p>
              </div>
              <div class="bg-white p-3 rounded border">
                <code class="text-xs">@keydown.ctrl.s.prevent="save"</code>
                <p class="mt-1 text-xs">Ctrl+S 保存图片</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 开始实践 -->
      <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-8 text-white text-center">
        <h3 class="text-2xl font-bold mb-4">🚀 开始你的实践之旅</h3>
        <p class="text-lg mb-6 opacity-90">
          准备好了吗？让我们一起创建一个令人惊艳的交互式绘图板！
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <a href="/chap05/tasks/5.0.html" target="_blank" 
             class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center">
            <span class="mr-2">👀</span>
            查看完整案例
          </a>
          <button @click="startPractice" 
                  class="bg-yellow-400 text-gray-800 px-8 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors flex items-center">
            <span class="mr-2">✨</span>
            开始实践
          </button>
        </div>
        <div class="mt-6 text-sm opacity-75">
          <p>💡 提示：建议使用Chrome或Firefox浏览器以获得最佳体验</p>
        </div>
      </div>

      <!-- 提交作业 -->
      <div class="mt-8 bg-gray-50 rounded-lg p-6 border border-gray-200">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
          <span class="mr-2">📤</span>
          作业提交
        </h3>
        <div class="space-y-4">
          <div class="bg-white p-4 rounded-lg border border-gray-200">
            <h4 class="font-medium text-gray-800 mb-2">提交要求</h4>
            <ul class="text-sm text-gray-600 space-y-1">
              <li>• 完整的HTML文件或Vue组件代码</li>
              <li>• 功能演示截图或录屏</li>
              <li>• 简要的实现思路说明</li>
              <li>• 遇到的问题和解决方案</li>
            </ul>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">截止时间：课程结束后一周</span>
            <button class="px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors font-medium">
              提交作业
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useAssignmentStore } from '@/stores/assignment'
import MarkdownViewer from './MarkdownViewer.vue'

// 获取路由和store实例
const router = useRouter()
const assignmentStore = useAssignmentStore()

// 开始实践方法
const startPractice = async () => {
  // 导航到编辑器页面并加载模板文件
  try {
    // 获取模板文件内容
    const response = await fetch('/chap05/tasks/5.0-template.html')
    if (!response.ok) {
      throw new Error('Failed to load template file')
    }
    const templateContent = await response.text()
    
    // 创建一个临时的示例对象
    const templateExample = {
      id: 'practice-template',
      title: 'Vue事件处理实践 - 交互式绘图板',
      description: '基于Vue 3的交互式绘图板实践项目',
      content: templateContent,
      filePath: '/chap05/tasks/5.0-template.html'
    }
    
    // 记录当前路由作为返回路径
    const currentRoute = router.currentRoute.value
    const returnRoute = {
      path: currentRoute.path,
      query: currentRoute.query
    }
    
    // 设置当前示例，指定来源为examples页面，并记录返回路由
    assignmentStore.setCurrentExample(templateExample, 'examples', returnRoute)
    
    // 导航到编辑器页面
    await router.push('/editor')
  } catch (error) {
    console.error('Failed to load practice template:', error)
    // 如果加载失败，回退到打开新窗口的方式
    window.open('/chap05/tasks/5.0-template.html', '_blank')
  }
}
</script>

<style scoped>
/* 组件特定样式 */
</style>